<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听器</title>
    <style type="text/css">
        .wrapper {
            display: flex;
            justify-content: space-between;
            border: 1px solid blue;
            width: 80% ;
            margin: 15px auto;
            min-height: 30px;
            line-height: 30px;
        }
        .wrapper>span:nth-child(2n+1) {
            flex-basis: 10%;
            text-align: right;
        }
        .wrapper>span:nth-child(2n) {
            flex-basis: 20%;
        }
        .wrapper>span:nth-child(2n) input {
            width: 80%;
        }
    </style>
    <script src="../scripts/vue@3.2.31.js"></script>
</head>
<body>

    <div id="root">
        <div class="wrapper">
            <span>id</span>
            <span>{{ user.id }}</span>
            <span>name</span>
            <span>{{ user.name }}</span>
            <span>gender</span>
            <span>{{ user.gender }}</span>
        </div>
        <div class="wrapper">
            <span>id</span>
            <span>
                <input v-model="user.id">
            </span>
            <span>name</span>
            <span>
                <input v-model="user.name">
            </span>
            <span>gender</span>
            <span>
                <input v-model="user.gender">
            </span>
        </div>
        <div class="wrapper">
            {{ message }}
        </div>
        <div class="wrapper">
            <input v-model="message">
        </div>
    </div>

    <script>
        const options = {
            data(){
                return {
                    user: {
                        id: 9527,
                        name: '华安',
                        gender: '靓仔'
                    },
                    message: '修改一下试试'
                }
            },
            // 侦听器
            watch: {
                // 侦听顶级 property
                message(newValue,oldValue){
                    console.log( 'old value: ' , oldValue );
                    console.log( 'new value: ' , newValue );
                },
                // 侦听指定对象的 property
                user: {
                    handler(changed,original){
                        // 因为 user 是个对象，因此比较 original 和 changed 会返回 true
                        console.log( changed === original ); // true
                        console.log( 'old: ' , original.id , original.name , original.gender );
                        console.log( 'new: ' , changed.id , changed.name , changed.gender );
                    },
                    // 启用深侦听 ( 不论其被嵌套多深 )
                    deep: true
                },
                // 侦听指定对象(user)的指定 property (name) 
                'user.name': function( n , o ){ // 这里不可能使用箭头函数
                    console.log( 'old value: ' , o , ' new value: ' , n );
                }
            }
        }
        const app = Vue.createApp(options);
        const root = app.mount('#root');
        console.log( root );
    </script>
    
</body>
</html>